<!-- 流程设置 -->
<template>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    fullscreen
    :footer="false"
    :closable="false"
    :esc-to-close="false"
  >
    <div class="content">
      <div class="header">
        <a-menu
          @menu-item-click="menuItemClick($event)"
          class="menu"
          mode="horizontal"
          :default-selected-keys="['baseInfo']"
        >
          <a-menu-item key="baseInfo">基础信息</a-menu-item>
          <a-menu-item key="approval">流程设计</a-menu-item>
        </a-menu>
        <a-space>
          <a-button @click="save()" type="primary">保存</a-button>
          <a-button @click="goBack" type="outline">返回</a-button>
        </a-space>
      </div>
      <div v-show="menuSelected === 'baseInfo'">
        <flowInfo :showTemplate="props.showTemplate" :data="data"></flowInfo>
      </div>
      <div v-show="menuSelected === 'approval'" class="approval">
        <Approval :nodeConfig="nodeConfig" :flowPermission="flowPermission" />
      </div>
    </div>
  </a-modal>
  <conditionDrawer :conditionForm="props.conditionForm" />
  <approverDrawer />
  <copyerDrawer></copyerDrawer>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, onMounted, computed } from 'vue';
  import {
    postBasisFlow,
    getBasisFlow,
    putBasisFlow,
  } from '@/api/order-management/client-management/order';
  import { Message } from '@arco-design/web-vue';
  import flowInfo from './flow-info.vue';
  // import Approval from "@/components/approval/index.vue"
  import conditionDrawer from '../componnents/condition-drawer.vue';
  import approverDrawer from '../componnents/approver-drawer.vue';
  import copyerDrawer from '../componnents/copyer-drawer.vue';

  // 保存方法
  const emits = defineEmits(['saveForm', 'update:data']);
  const props = withDefaults(
    //参数说明
    defineProps<{
      showTemplate: boolean;
      conditionForm: any;
      data: {
        id?: number;
        type: number;
        name: string;
        templateId: number;
        userStaffId: number;
        description: string;
        status: number;
        reCommit: number;
        nodeConfig: any;
      };
    }>(),
    {
      showTemplate: false,
    }
  );
  const visible = ref(false);
  // 显示全屏弹框
  const fullScreen = () => {
    visible.value = true;
  };
  const menuSelected = ref('baseInfo');
  const menuItemClick = (key: any) => {
    menuSelected.value = key;
  };
  const goBack = () => {
    visible.value = false;
  };

  // 暴露方法给父组件
  defineExpose({ fullScreen });
  let nodeConfig = computed(() => {
    return props.data?.nodeConfig;
  });
  let flowPermission = ref();

  let data = computed(() => {
    return props.data;
  });
  const save = () => {
    emits('update:data', data.value);
    visible.value = false;
  };
</script>

<style scoped lang="less">
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;

    .header {
      display: flex;
      border-bottom: 1px solid #eee;
      align-items: center;

      .form-name {
        font-size: 18px;
      }

      // background: rgba(61, 126, 255, 1);
      // color: white;
      .menu {
        flex: 1;
        text-align: center;
      }
    }

    .center {
      flex: 1;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 700px;
      padding: 16px;
      border: #eee 1px solid;
      margin-top: 16px;
      box-shadow: 3px 3px #eee;
    }
  }
</style>
